/**
* 功能描述: 基础仪表进度条demo
* @author 崔孝楠
* @date 2022/9/21 18:53
* @version 1.0
*/
<template>
  <div class="yw-progress yw-progress-circle">
    <div class="yw-progress-inner">
      <!-- stroke-dasharray 第一个参数: 进度条长度（带颜色的进度条），第二个参数: 间隔长度（开口大小）
           第一个参数 + 第二个参数 = 3.1415926*2r 周长
          百分比计算 circle-path的第一个参数 = circle-trail的第一个参数 * 百分比； circle-path的第二个参数 = 周长 - circle-path的第一个参数 -->
      <svg width="150px" height="150px" style="transform: rotate(125deg)">
        <circle r="70" cy="75" cx="75" stroke-width="8" class="yw-progress-circle-trail" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0"  stroke-dasharray="350px 90px" />
        <circle r="70" cy="75" cx="75" stroke-width="8" class="yw-progress-circle-path" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dashoffset="0"  stroke-dasharray="262.5px 177.5px" />
      </svg>
      <span class="yw-progress-text" title="75%">75%</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>
